<template>
   <div class="app-admin">
    <Query
      :items="queryColumns"
      :initial-params="queryParams"
      @query="handleQuery"
      labelWidth="100px"
    />
    <Table
      :table-columns="tableColumns"
      :table-loading="tableLoading"
      :table-data="tableData"
      :total="total"
      @pagination="handlePagination"
    >
      <template v-slot:tools>
        <el-button-group>
          <el-button type="primary" @click="handleAdd">添加用户</el-button>
        </el-button-group>
      </template>
      <template #headImg="scope">
        <img :src="scope.row.headImg" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
      </template>
      <template #status="scope">
        <el-switch
          v-model="scope.row.status"
          @change="changeValue($event, scope.row)"
          :validate-event="false"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </template>
      <template #opt="scope">
        <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </Table>
    <DialogForm
      v-model:visible="showDialog"
      :title="dialogTitle"
      :form-items="formItems"
      :form-data="formData"
      :form-rules="formRules"
      :loading="loading"
      width="500px"
      @submit="handleSubmit"
    />
   </div>
</template>

<script setup name="admin">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import DialogForm from '@/components/FormDialog/index.vue'
import { getAdminUserList, saveAdminUser } from "@/api/system/admin";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)
const dialogTitle = ref('')
const loading = ref(false)
const showDialog = ref(false)
const formRules = ref({
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
  ],
  account: [
    { required: true, message: '请输入手机号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
})
const formData = ref({})

const data = reactive({
  tableColumns: [
    { label: "账号", prop: "account" },
    { label: "用户", prop: "nickname" },
    { label: "所属角色", prop: "roleName" },
    { label: "创建时间", prop: "gmtCreate" },
    { label: "状态",  prop: "status", slot: "status"},
    { label: "操作",  prop: "opt", slot: "opt"},
  ],
  queryColumns: [
   { label: "创建开始时间",  prop: "beginTime", type: 'datetime', attrs: { placeholder:'请选择',type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss'} },
   { label: "创建结束时间",  prop: "endTime", type: 'datetime', attrs: { placeholder:'请选择',type: 'datetime', valueFormat: 'YYYY-MM-DD HH:mm:ss', format: 'YYYY-MM-DD HH:mm:ss'}  },
  ],
  pageParams: {
   current: 1,
   size: 10
  },
  queryParams: {},
  formItems: [
    {
      prop: 'nickname',
      label: '用户昵称',
      type: 'input',
      placeholder: '请输入用户昵称'
    },
    {
      prop: 'account',
      label: '登录账号',
      type: 'input',
      placeholder: '请输入登录账号'
    },
    {
      prop: 'password',
      label: '登录密码',
      attrs: { type: "password" },
      type: 'input',
      placeholder: '请输入登录密码'
    },
    {
      prop: 'status',
      label: '启用状态',
      type: 'switch',
      attrs: {
        activeValue: 1,
        inactiveValue: 0,
        activeColor:"#13ce66",
        inactiveColor:"#ff4949"
      }
    },
  ]
})

const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
   tableLoading.value = true
   const data  = {
      ...queryParams.value,
      ...pageParams.value
   }
   getAdminUserList(data)
   .then(res => {
      tableData.value = res.data.records
      total.value = res.data.total
   })
   .finally(() => {
      tableLoading.value = false
   })
}
getList()
/** 搜索按钮操作 */
const handleQuery = (val) => {
  queryParams.value = val
  getList()
}
/** 打开新增弹窗 */
const handleAdd = () => {
 dialogTitle.value = '添加用户'
  // 重置表单数据
  formData.value = {
    nickname: '',
    phone: '',
    status: 1
  }
  formItems.value[2].hidden = false
  showDialog.value = true
}

/** 打开编辑弹窗 */
const handleEdit = (row) => {
 dialogTitle.value = '编辑用户'
  // 重置表单数据
  formData.value = {
    id: row.id,
    nickname: row.nickname,
    password: row.password,
    account: row.account,
    status: row.status
  }
  formItems.value[2].hidden = true
  showDialog.value = true
}
/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除此数据？').then(function() {
    saveAdminUser({id: row.id, delFlag: -1}).then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
  })
}
const handlePagination = (val) => {
  pageParams.value = val
  getList()
}
const handleSubmit = async (data) => {
  loading.value = true
  try {
    // 这里调用API进行提交
    await saveAdminUser(data)
    showDialog.value = false
    getList()
    proxy.$modal.msgSuccess("操作成功")
  } finally {
    loading.value = false
  }
}
const changeValue = (val, row) => {
  if (tableLoading.value) return
  saveAdminUser({ id: row.id, account: row.account, status: val })
    .then(() => {
      proxy.$modal.msgSuccess("操作成功")
    })
}
</script>
<style lang="scss">
.app-admin {
  padding: 8px;
}
</style>